import React from 'react';
import { history } from 'umi'
import { message, Empty, Icon } from 'antd';
import BraftEditor from 'braft-editor';
import styles from '../../MyExecuteDetail.less';

const DetailInfo = ({ detailInfo = { relateLinkList: [], relateAttachmentList: [] }, changeMark = {} }) => {
    // 预览
    const FilePreview = item => {
        const fileArr = item.originName.split('.');
        if (
            fileArr.length > 1 &&
            fileArr[1] !== 'docx' &&
            fileArr[1] !== 'DOCX' &&
            fileArr[1] !== 'doc' &&
            fileArr[1] !== 'DOC' &&
            fileArr[1] !== 'rtf' &&
            fileArr[1] !== 'RTF' &&
            fileArr[1] !== 'xls' &&
            fileArr[1] !== 'XLS' &&
            fileArr[1] !== 'xlsx' &&
            fileArr[1] !== 'XLSX' &&
            fileArr[1] !== 'pdf' &&
            fileArr[1] !== 'PDF' &&
            fileArr[1] !== 'ppt' &&
            fileArr[1] !== 'PPT' &&
            fileArr[1] !== 'pptx' &&
            fileArr[1] !== 'PPTX'
        ) {
            message.error('此文件格式不支持预览！');
        } else {
            history.push({
                pathname: '/work/task/filePreview',
                query: {
                    file: [
                        {
                            originName: item.originName,
                            keyName: item.keyName,
                            url: item.url
                        }
                    ]
                },
                state: {
                    tabRoute: true
                }
            });
        }
    };
    // 关联链接-打开新窗口
    const openNewPage = item => {
        window.open(item);
    };

    React.useEffect(() => {}, [detailInfo]);
    return (
        <div>
            <h4
                className={styles.littleTitle}
                style={{
                    color:
                        changeMark.taskDesc === undefined || changeMark.taskDesc === 0
                            ? 'rgba(120, 120, 120, 1)'
                            : 'red'
                }}
            >
                描述
            </h4>
            {detailInfo.taskDesc && detailInfo.taskDesc !== '<p></p>' ? (
                <div
                    // dangerouslySetInnerHTML={{ __html: detailInfo.taskDesc }}
                    className={styles.decDiv}
                >
                    <BraftEditor
                        controls={[]}
                        readOnly
                        style={{
                            minHeight: 240,
                            border: 'none'
                        }}
                        className={styles.bEditor}
                        value={BraftEditor.createEditorState(detailInfo.taskDesc)}
                    />
                </div>
            ) : (
                <div style={{ height: '240px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                </div>
            )}
            <h4
                className={styles.littleTitle}
                style={{
                    color:
                        changeMark.relateLink === undefined || changeMark.relateLink === 0
                            ? 'rgba(120, 120, 120, 1)'
                            : 'red'
                }}
            >
                关联链接
            </h4>
            {detailInfo.relateLinkList && detailInfo.relateLinkList.length > 0 ? (
                <ul className={styles.urlList}>
                    {detailInfo.relateLinkList &&
                        detailInfo.relateLinkList.map((item, index) => (
                            <li key={`${item}${index.toString()}`} style={{ wordBreak: 'break-word' }}>
                                <span
                                    title={item}
                                    style={{ color: '#ffa808', cursor: 'pointer' }}
                                    onClick={() => {
                                        openNewPage(item);
                                    }}
                                >
                                    {item}
                                </span>
                            </li>
                        ))}
                </ul>
            ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
            <h4
                className={styles.littleTitle}
                style={{
                    color:
                        changeMark.attachmentList === undefined || changeMark.attachmentList === 0
                            ? 'rgba(120, 120, 120, 1)'
                            : 'red'
                }}
            >
                附件
            </h4>
            {detailInfo.attachmentList && detailInfo.attachmentList.length > 0 ? (
                <ul className={styles.filesList}>
                    {detailInfo.attachmentList &&
                        detailInfo.attachmentList.map(item => (
                            <li key={item.keyName}>
                                <span
                                    style={{ color: '#ffa808', cursor: 'pointer', wordBreak: 'break-word' }}
                                    onClick={() => {
                                        FilePreview(item);
                                    }}
                                >
                                    {item.originName}
                                </span>
                                <a
                                    rel="noopener noreferrer" // 图片类的直接打开
                                    target="_blank"
                                    href={item.url}
                                    download
                                    style={{ marginLeft: '16px', cursor: 'pointer' }}
                                >
                                    {/* 下载 */}
                                    <Icon type="download" />
                                </a>
                            </li>
                        ))}
                </ul>
            ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
        </div>
    );
};

export default DetailInfo;
